{% extends 'admins/base.html' %}
{% block link %}
    <link rel="stylesheet" href="/static/editormd/css/editormd.css"/>
    <link rel="stylesheet" href="/static/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.css">
{% endblock %}
{% block body %}

<section class="content">
<!--添加分类-->
        <div class="modal fade bs-example-modal-sm" id="myModalfeilei" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加分类</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" action="{% url 'addcategories' %}" method="post" id="creategroup">{% csrf_token %}
                    <div class="form-group">
                    <label class="col-lg-4 control-label" for="categories">分类名:</label>
                        <div class="col-lg-8">
                            <input type="text" id="categories" class="form-control" name="categories" placeholder="请输入分类名" />
                        </div>
                </div>
                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="creategroup" class="btn btn-primary" value="submit">提交</button>
              </div>
              </div>
                </form>
              </div>
            </div>
        </div>
        </div>
        <!--弹窗结束-->
<!--添加标签-->
        <div class="modal fade bs-example-modal-sm" id="myModaltag" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加标签</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" action="{% url 'addtags' %}" method="post" id="createtag">{% csrf_token %}
                    <div class="form-group">
                    <label class="col-lg-4 control-label" for="tags">标签名:</label>
                        <div class="col-lg-8">
                            <input type="text" id="tags" class="form-control" name="tags" placeholder="请输入标签名" />
                        </div>
                </div>
                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="createtag" class="btn btn-primary" value  ="submit">提交</button>
              </div>
              </div>
                </form>
              </div>
            </div>
        </div>
        </div>
        <!--弹窗结束-->
<!--添加标签-->
        <div class="modal fade bs-example-modal-sm" id="myModalseries" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">创建系列</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" action="{% url 'addseries' %}" method="post" id="createseries">{% csrf_token %}
                    <div class="form-group">
                    <label class="col-lg-4 control-label" for="series">系列名:</label>
                        <div class="col-lg-8">
                            <input type="text" id="series" class="form-control" name="series" placeholder="请输入系列名" />
                        </div>
                </div>
                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="createseries" class="btn btn-primary" value  ="submit">提交</button>
              </div>
              </div>
                </form>
              </div>
            </div>
        </div>
        </div>
        <!--弹窗结束-->
        <section class="content-header">
            <h1>
                添加博文
            </h1>
        </section>
        <section class="content">
            <div class="row">
                <form action="{% url 'addarticle' %}" method="post">
                    {% csrf_token %}
                    <div class="box">
                    <div class="box-header">
                <a href="#myModaltag" style="float: right;margin: 0 2px 0 2px;background-color: #f0ad4e;border-color: #eea236;" class="btn btn-sm btn-primary " data-toggle="modal" data-placement="bottom"><span class="glyphicon glyphicon-cloud"></span> 添加标签 </a>
                <a href="#myModalseries" style="float: right;margin: 0 2px 0 2px;" class="btn btn-sm btn-success " data-toggle="modal" data-placement="bottom"><span class="glyphicon glyphicon-tags"></span> 创建系列 </a>
                <a href="#myModalfeilei" style="float: right;margin: 0 2px 0 2px;" class="btn btn-sm btn-primary " data-toggle="modal" data-placement="bottom"><span class="glyphicon glyphicon-user"></span> 添加分类 </a>
            </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    <input class="form-control input-lg" type="text" name="title" placeholder="文章标题">
                                </div>
                            </div>
                            <br>
                            <div class="row">
                            <div class="col-md-1">
                                    <div class="form-group">
                                        <select class="form-control" name="series">
                                        <option value="">请选择系列</option>
                                            {% for item in series %}
                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            <div class="col-md-1">
                                    <div class="form-group">
                                        <select class="form-control" name="status">
                                            <option value="0">发布</option>
                                            <option value="1">存稿</option>
                                        </select>
                                    </div>
                                </div>
                            <div class="col-md-1">
                                    <div class="form-group">
                                        <select class="form-control" name="category">
                                            <option value="0">原创</option>
                                            <option value="1">转载</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <select class="form-control select2" multiple="multiple" data-placeholder="分类" style="width: 100%;" name="categories">
                                            {% for category in categories %}
                                                <option value="{{ category.name }}">{{ category.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-5">
                                    <div class="form-group">
                                        <select class="form-control select2" multiple="multiple" data-placeholder="标签" style="width: 100%;" name="tags">
                                            {% for tag in tags %}
                                                <option value="{{ tag.name }}">{{ tag.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div id="layout">
                            <div id="editormd"></div>
                        </div>
                    </div>
                    <div class="box-footer" style="background-color: #ecf0f5">
                        <button type="submit" class="btn btn-primary pull-right btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </section>
</section>
{% endblock %}

{% block javascript %}
    <script type="text/javascript">
			$(document).ready(function(){
				$('#articleul').addClass("menu-open");
				$('#article').addClass("active");
				$('#articleli').addClass("active");
                $("body").addClass("sidebar-collapse");
		});
    </script>
    <script src="/static/plugins/select2/select2.full.min.js"></script>
    <script src="/static/editormd/editormd.js"></script>
    <script type="text/javascript">
        var Editor;
        $(function () {
            Editor = editormd("editormd", {
                width: "100%",
                height: 740,
                path: '/static/editormd/lib/',
                markdown: '',
                codeFold: true,
                saveHTMLToTextarea: true,
                searchReplace: true,
                htmlDecode: "style,script,iframe|on*",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/admins/upload/"
            });
            $(".select2").select2();
        });
    </script>
{% endblock %}
